<template>
	<div class="companyOverview">
		<header-Name :name="headerTitle"></header-Name>
		<div class="content">
			<div class="name">康希诺生物股份公司</div>
			<div class="companyLabel">
				<div  :class="[label,list.color]"  v-for="list in companyLabel">{{list.text}}</div>
				<el-button type="text" size="mini">更多</el-button>
			</div>
			<el-row :gutter="20">
				<el-col :span="10">
					<div class="nameList">
						<span class="leftSpan">企业母公司：</span>
						<span class="rightSpan">上海医药集团股份有限公司</span>
					</div>
					<div class="nameList">
						<span class="leftSpan">曾用名：</span>
						<span class="rightSpan">天津康希诺生物技术有限公司</span>
					</div>
					<div class="nameList">
						<span class="leftSpan">地址：</span>
						<span class="rightSpan">天津经济技术开发区西区南大街185号西区</span>
					</div>
				</el-col>
				<el-col :span="8">
					<div class="nameList">
						<span class="leftSpan">法定代表人：</span>
						<span class="rightSpan">Yu Xuefeng</span>
					</div>
					<div class="nameList">
						<span class="leftSpan">统一社会信用代码：</span>
						<span class="rightSpan">91120116681888972M</span>
					</div>
					<div class="nameList">
						<span class="leftSpan">纳税信用：</span>
						<span class="rightSpan">A级纳税人</span>
					</div>
				</el-col>
				<el-col :span="6">
					<div class="nameList">
						<span class="leftSpan">企业年限：</span>
						<span class="rightSpan">2009-01-13至长期</span>
					</div>
					<div class="nameList">
						<span class="leftSpan">注册资本：</span>
						<span class="rightSpan">24,744.99 万 人民币</span>
					</div>
					<div class="nameList">
						<span class="leftSpan">经营状态：</span>
						<span class="rightSpan">在营（开业）</span>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="nameList">
						<span class="leftSpan">股东结构：</span>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="structureBox">
						<div class="structure" v-for=" data in structureList">
							<span class="span">
								{{data.text}}
							</span>
							<span>
								{{data.percent}}%
							</span>
						</div>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="nameList" style="margin-top: 10px;">
						<span class="leftSpan">公司简介：</span>
					</div>
				</el-col>
			</el-row>
			<el-row :gutter="20">
				<el-col :span="24">
					<div class="nameList" style="line-height: 24px;margin-top: 10px;margin-bottom: 14px;">
						<span class="rightSpan">康希诺生物股份公司（简称：康希诺生物，香港股票代码61868818SH）于2009年注册于天津滨海新区，是由跨国制药企业高管团队回康希诺沙这是达什喀勒克国创立的***高新技术企业。康希诺生物以在世界范围内提供预防***和感染病的解决方案为己任，专业从事高质量人用疫苗的研发、生产和商业化，是国内领先的高科技生物制品企业。2019年3月，康希诺生物在香港联交所主板H股上市；2020年8月13日，生物正式登陆科创版，成为科创板开板以来“A+H”疫苗股。康希诺生物的研发团队汇聚了...</span>
						<el-button type="text" size="mini">查看更多</el-button>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>
</template>

<script>
	import {
		mapGetters
	} from 'vuex'
	import HeaderName from './headerName.vue';
	export default {
		name: 'companyOverview', //企业概览
		components: {
			HeaderName
		},
		data() {
			return {
				label:"label",
				headerTitle: "企业概览",
        originColor : [
          "labelBlue","labelPurple","labelOrange","labelBlue","labelPurple","labelOrange",
          "labelBlue","labelPurple","labelOrange","labelBlue","labelPurple","labelOrange",
          "labelBlue","labelPurple","labelOrange","labelBlue","labelPurple","labelOrange",
          "labelBlue","labelPurple","labelOrange","labelBlue","labelPurple","labelOrange",
          "labelBlue","labelPurple","labelOrange","labelBlue","labelPurple","labelOrange",
          "labelBlue","labelPurple","labelOrange","labelBlue","labelPurple","labelOrange",
          "labelBlue","labelPurple","labelOrange","labelBlue","labelPurple","labelOrange",
          "labelBlue","labelPurple","labelOrange","labelBlue","labelPurple","labelOrange",
        ],
				companyLabel:[/* {
					color:"labelBlue",
					text:"投资多家企业作为最终受益人或实控人"
				}*/],
				structureList:[{
					text:"HKSCC NOMINEES LIMIT",
					percent:"39"
				},{
					text:"XUEFENG YU（宇学峰）",
					percent:"23.22"
				},{
					text:"朱涛 7.22%",
					percent:"7.22"
				},{
					text:"HELEN HUIHUA MAO（毛慧华）",
					percent:"9.22"
				},{
					text:"DONGXU QIU（邱东旭）",
					percent:"6.92"
				}]
			}
		},
		computed: {
			...mapGetters({
				codeCombo: 'getCodeCombo',
				permissionList: 'getPermission',
				userInfo: 'getUserInfo',
			}),
		},
		activated() {

		},
		created() {

		},
    mounted() {
      this.init();
    },
		methods: {
      init(){
        //this.originColor
        let labelList = ["投资多家企业作为最终受益人或实控人","你好","股东有政府资质","累计对外投资1000-5000万","股东有政府资质","累计对外投资1000-5000万","股东有政府资质","累计对外投资1000-5000万","本市十佳企业之首","股东有政府资质","累计对外投资1000-5000万"];
        var companyLabelDomW = document.querySelector('.companyLabel').offsetWidth;
        console.log("offsetWidth",companyLabelDomW)
        let labelListStr =  labelList.join("").length;
        console.log("labelListStr",labelListStr)
        labelList.forEach((item,i)=>{
          this.companyLabel.push({
            text:item,
            color:this.originColor[i]
          })
        })
      }
		},
	}
</script>

<style lang="scss" scoped>
	.companyOverview {
		max-width: 1200px;
		width: 100%;
		min-height: 420px;
		background-color: #FFFFFF;
		background-image: url('../../../../../assets/img/work/custInfo/riskOverviewBground.png');
		background-size: 100% 100%;

		.content {
			margin-top: 4px;
			width: 100%;
			height: calc(100% - 64px);
			padding: 0px 20px;
			box-sizing: border-box;
			::v-deep.el-button--text {
				color: #1890FF;
				font-size: 14px;
				font-weight: 400;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				padding: 10px 6px !important;
			}
			.name {
				width: 100%;
				height: 22px;
				font-size: 22px;
				font-weight: 500;
				color: #222222;
				margin-bottom: 10px;
			}

			.nameList {
				margin-top: 20px;
				font-size: 14px;
				font-family: SourceHanSansCN-Regular, SourceHanSansCN;
				font-weight: 400;

				.leftSpan {
					margin-right: 2px;
					color: #555555;
				}

				.rightSpan {
					color: #2D4E83;
				}
			}
			.structureBox{
				margin-top: 16px;
				min-height: 24px;
				display: flex;
				width: 100%;
				flex-wrap: wrap;
				.structure{
					margin-bottom: 10px;
					background: #EBEFFB;
					border-radius: 4px;
					font-size: 14px;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					font-weight: 400;
					color: #345C86;
					height: 24px;
					line-height: 24px;
					text-align: center;
					padding: 0px 10px;
					margin-right: 10px;
					.span{
						margin-right: 3px;
					}
				}
			}
			.companyLabel {
				min-height: 24px;
				width: 95%;
				display: flex;
			/* 	align-items: center; */
        flex-wrap: wrap;
        ::v-deep.el-button--text {
        	margin-top: 5px;
        }
				.label {
          margin-top: 10px;
					background: #F9F5FF;
					border-radius: 4px;
					/* border-bottom: 1px solid;
					border-right: 1px solid; */
					font-size: 12px;
					font-weight: 400;
					line-height: 22px;
					box-sizing: border-box;
					margin-right: 12px;
					height: 24px;
					padding: 0px 15px;
					//opacity: 0.4;
					box-shadow: 2px 2px 3px;

				}

				.labelOrange {
					color:rgba(255, 103, 55, 0.9) ;
					//box-shadow: 2px 2px 3px rgba(255, 103, 55, 0.4);
					//border-image: linear-gradient(180deg, rgba(255, 103, 55, 0.05), rgba(255, 103, 55, 1)) 1 1;
				}

				.labelPurple {
					color:  rgba(146, 55, 255, 0.9);
					//box-shadow: 2px 2px 3px rgba(146, 55, 255, 0.4);
					//background: linear-gradient(170deg, #EDD1FF 0%, #9237FF 100%);
					//border-image: linear-gradient(180deg, rgba(146, 55, 255, 0.05), rgba(146, 55, 255, 1)) 1 1;
				}

				.labelBlue {
					color:  rgba(55, 101, 255, 0.9);
					//box-shadow: 2px 2px 3px rgba(55, 101, 255, 0.4);
					//border-image: linear-gradient(180deg, rgba(55, 101, 255, 0.05), rgba(55, 101, 255, 1)) 1 1;

				}
			}
		}
	}
</style>
